<template>
    <el-container class="main-count">
      <!-- 启动页 -->
      <div class="load-page" v-if="$route.name=='login'">
        <div class="loginContent">
          <img src="@/assets/images/login/logo.png" alt=""> 
          <div>
           <span>越界资产管理</span>  
          </div>
          <div>
            <span>为企业资产管理和办公耗材管理提供数字化解决方案</span>
           </div>
          <div class="loading">
            <i class="el-icon-loading"></i>
			<span>加载中</span>
          </div>
        </div>
        <img src="@/assets/images/login/bg.jpg" alt="" class="bgclass">
      </div>
      <!-- 领导页 -->
      <div class="bgclass" v-if="$route.name!='login'&&($store.state.users.login_count==1)&&($store.state.users.is_admin==2)">
        <img width='100%' height="100%" :src="imgList[index]" alt="" @click="changeIndex">
      </div>
      <el-aside :width="!isSmallNav?'200px':'initial'" :class="!isSmallNav?'min-aside-width':''" >
        <div class="logo" v-bind:class="isSmallNav?'small-log':''">
         <!-- {{!isSmallNav?'越界科技':'Y J'}} -->
          <img v-if="!isSmallNav" src="@/assets/images/bigLogo.png" />
          <img v-else src="@/assets/images/smallLogo.png" />
        </div>
        <navigation ref="navigation" :menu="$store.state.nav" :isCollapse="isSmallNav" @listenClick="linkTo" ></navigation>
      </el-aside>
      <el-container>
        <el-header class="hou-header" style="border-bottom: 2px solid rgba(204, 204, 204, 1);">
          <span class="nav-zoom" @click="isSmallNav = !isSmallNav">
            <i class="el-icon-s-fold"  :class="isSmallNav?'zoom':''"></i>
          </span>
          <span class="nav-title-name">{{$store.state.users.corp_name||''}}</span>
          <!-- 头像和 姓名-->
          <span class="header-right" style="margin-left:15px">
            <span style="margin-right:10px">
              <span class="fs16">您好，{{$store.state.users.name}}</span>
            </span>
            <img :src="$store.state.users.avatar||require('@/assets/images/avatar.png')" alt />
          </span>
        </el-header>
        <el-main class="i-container">
          <div class="router-container">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
</template>
<script>
/* eslint-disable */

import Navigation from "@/components/navigation";
import help from "@/components/help";
import { getNavByUser } from "@/api";
export default {
  name: "appmain",
  components: { Navigation, help },
  data() {
    return {
      hide: false,
      rate: 0 /**评价 */,
      dialogVisible: false /**弹窗显示 */,
      dialogTitle: "帮助中心" /**弹窗标题*/,
      sideWidth: `${window.innerWidth * 0.1276}px`,
      tipeWidth: `${window.innerWidth * 0.1276}`,
      isSmallNav: false,
      index:0,
      imgList:[
        require('@/assets/images/zero.png'),
        require('@/assets/images/one.png'),
        require('@/assets/images/two.png'),
        require('@/assets/images/three.png'),
        require('@/assets/images/four.png'),
        require('@/assets/images/five.png'),
      ]
    };
  },
  created() {
    
  },
  mounted() {
    this.$refs.navigation.defaultActive = this.$store.state.defaultActive  
    window.onresize = () => {
      this.isSmallNav = window.innerWidth * 0.1276 < 150;
      this.sideWidth = `${window.innerWidth * 0.1276}px`;
      this.tipeWidth = `${window.innerWidth * 0.1276}`;
    };
  },
  watch: {
    /** 根据页面路由匹配菜单active */
    $route(to, from) {
      if(this.recursiveCheck(to.fullPath)){
        this.$refs.navigation.defaultActive = to.fullPath 
         this.$store.commit('changeDefaultActive',to.fullPath)
      }
    }
  },
  methods: {
    changeIndex(){
      this.index<5?this.index++:this.$store.state.users.login_count=2
    },
    recursiveCheck(toPath) {
      let pathlist = [];
      this.getPathList(this.$store.state.nav, pathlist);
      return pathlist.some(item => {
        return item === toPath;
      });
    },
    /** 递归获取可点击的导航path列表 */
    getPathList(tree, arr) {
      if (tree && Array.isArray(tree) && tree.length) {
        for (var i in tree) {
          tree[i].menu && tree[i].menu.length
            ? this.getPathList(tree[i].menu, arr)
            : arr.push(tree[i].menu_url);
        }
      }
    },
    /** 导航跳转 */
    linkTo(data) {
      localStorage.curTabIndex = 0
      if(this.$route.path != data.menu_url){
        this.$store.commit('changeWarehouse','');
        this.$router.replace({ path: data.menu_url });
      }
    },
    /**显示弹窗 */
    dialogVisibleChangeFn(val) {
      this.dialogVisible = val;
    }
  },
  beforeCreate() {
    this.$router.currentRoute.fullPath == "/index" ? (this.startup = true) : "";
  }
};
</script>
<style lang="stylus" scoped>
.main-count 
  height: 100%;
  .loginContent
    z-index 2021
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height 100%
    justify-content center
    align-items center
    overflow hidden
    display flex
    flex-direction column
    >img  
     width: 72px;
     height: 72px;
     border: 4px solid #fff;
     border-radius: 100px;
     margin 0 auto
    >div 
      color #fff
      display flex
      align-items center
    >div:nth-of-type(1)
      height  89px;
      margin-top 20px
      >span 
        font-size 36px;
        height 35px;
        color rgba(255, 255, 255, 1);
        font-size 36px;
        text-align center;
        font-family SourceHanSansSC-regular;
    >div:nth-of-type(2)
      margin-top 0px
      height 15px;
      opacity 0.68;
      color rgba(255, 255, 255, 1);
      font-size 24px;
      text-align center;
      font-family SourceHanSansSC-regular;
      >span 
        font-size 18px;
    .loading 
        margin-top 80px
        >i
          width 14px;
          height 14px;
          margin-right 5px
       >span
         width 42px;
         height 20px;
         color rgba(255, 255, 255, 1);
         font-size 14px;
         text-align left;
         font-family SourceHanSansSC-regular;
    >span
      color rgba(255, 255, 255, 1);
      font-size 20px;
      text-align center;
      display inline-block
      padding 20px 25px 
      width 250px
      border-radius 40px
      background-image linear-gradient(to right,#047cff,#7f5eff)
  @keyframes bounde {
    0%{
      transform scale(0)
    }
    40%{
      transform scale(1.1)
    }
    60%{
      transform scale(0.9)
    }
    80%{
      transform scale(1.1)
    }
    100%{
      transform scale(1)
    }
  }
  .bgclass 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2020;
    background: #f0fbff;
    display: flex;
    align-items: center;
  .el-aside 
    height: 100%;
    overflow: hidden;
    ul 
      height: calc(100% - 102px);
      // height: calc(100% - 60px);
      text-align: left;
      border-right: 0px;
      overflow-y: auto;
      &::-webkit-scrollbar 
        width: 0px;
        height: 0px;
      &:not(.el-menu--collapse){
        // height: calc(100% - 139px);
      }
  .logo 
    width: 100%;
    line-height: 60px;
    background-color: #001529;
    color: #ffffff;
    font-size: 1.3rem;
    font-family: fantasy;
    transition: 0.3s width ease-in-out;
    text-align: center;
    img 
      width: 100%;
  .small-log 
    // width: 64px;
    width: 76px;
   .timebox
      width 200px
      background-color #031833
      height 79px
      padding 20px
      position relative
      bottom 0
      margin-top 12px
      box-sizing border-box
      animation boxshow .3s 
      >div
         color #757575
         font-size 12px
         line-height 25px
      >div:last-child
         margin-bottom 0
@keyframes boxshow {
    0%{
      opacity 0
    }
    60%{
      opacity 0
    }
    80%{
      opacity .2
    }
    100%{
      opacity 1
    }
  }
  .el-header 
    background-color: #fff;
    text-align: left;
    .nav-zoom 
      display: inline-flex;
      line-height: 60px;
      cursor: pointer;
      i 
        font-size: 20px;
        transition: all 0.35;
      .zoom 
        transform: rotate(180deg);
    .nav-title-name 
      line-height: 60px;
      height: 60px;
      font-size: 20px;
      color rgb(96,96,96)
      margin-left: 15px;
    .header-right 
      float: right;
      height: 60px;
      display: inline-block;
      display: flex;
      align-items: center;
      color: rgba(86, 105, 149, 1);
      font-size: 16px;
      font-family: SourceHanSansSC-regular;
      img 
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
        padding: 2px;
        box-sizing: border-box;
      img:first-child 
        width: 32px;
        height: 32px;
        border-radius: 50%;
  .min-aside-width 
    min-width: 200px !important;
  .i-container 
    height: 100%
  .router-container 
    height: 100%
    // height:100vh
.fs16 
  font-size: 16px
</style>
<style lang="stylus">
.main-count
  .el-main
    padding 10px 10px 0px 10px
</style>
